<template>
  <div>


    <!-- 右上角 fixed框：官费，服务，总价 -->
    <div class="rMoneyBox padding10"
      v-show="sF"
      :style="`width:${suoJ?'200px':'50px'}; height:${suoJ?'auto':'50px'};`"
    >
      <div v-show="suoJ">
        <div class="paddingLR15 c999">
          <div class="f_16 f_bold  c333 marginB10">{{goodsObj.desc}}</div>
          <div class="f_14 ">
            官费：¥ <span>{{ parseFloat(goodsObj.official_fee) }}</span>
          </div>
          <div class="f_14 marginB5">
            服务费：¥ <span>{{parseFloat(goodsObj.service_fee)}}</span>
          </div>
          <div class="f_16">
            价格：¥ <span class="cRed f_24 f_bold">{{parseFloat(goodsObj.price)}}</span>
          </div>
          <template v-if="$app.judgeData(order_id)">
            <!-- 调用父级的方法 -->
            <Button type="primary" size="small"  class="marginT10" ghost @click="$parent.backOrSee">
              <Icon type="md-arrow-round-back" size="18" class="relative" />
              返回
            </Button>
          </template>
        </div>
      </div>

      <Icon 
        :type="`${suoJ?'ios-arrow-dropright':'ios-arrow-dropleft-circle'}`"
        size="28"
        class="pointer suoJ "
        :class="`${suoJ?' cCCC':' cBlue'}`"
        @click="suoJ=!suoJ"
      />

    </div>

    <Card class="marginB10">
      <div class="overflowH f_14 TJ_big">
        <div class="TJ_title f_bold f_16">
          基础信息
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box">
          <!-- 上传框弹框 -->
          <Modal
            v-model="ZIshow"
            :footer-hide="true"
            :mask-closable="false"
            class-name="vertical-center-modal"
            title="AI智能识别 - 请上传证件（图片格式）"
            width="400"
          >
            <Row class="f_16 c333  marginB10" :gutter="15">
              <Col span="3" class="textRight">
                <i class="iconfont iconjinggao2 cRed f_20"></i>
              </Col>
              <Col span="21" >
                <div class="marginB5">请上传中国大陆营业执照 或 公民身份证。</div>
                <div class="f_14 c999">确保图片文字内容清晰，以保证识别精准度。</div>
              </Col>
            </Row>
            <Row class="textCenter" :gutter="15">
              <Col span="12">
                <div class="pointer tran3 ZID relative" @click="ZIshow = false">
                  <i class="iconfont f_60 cRed ">&#xe617;</i>
                  <div class="paddingB10">营业执照</div>
                  <input type="file" ref="uploadLicense" class="InputFileBox" accept="image/*" @change="filImage_up($event,{type:'uploadLicense'})" />
                </div>
              </Col>
              <Col span="12" >
                <div class="pointer tran3 ZID relative" @click="ZIshow = false">
                  <i class="iconfont f_60 cBlue">&#xe674;</i>
                  <div class="paddingB10">身份证</div>
                  <input type="file" ref="uploadIdcard" class="InputFileBox"  accept="image/*" @change="filImage_up($event,{type:'uploadIdcard'})" />
                </div>
              </Col>
            </Row>
          </Modal>
          
          <div v-show="!$app.judgeData(order_id)" class="textCenter" style="position:absolute;left:700px;top:57px;width:140px;height:140px;">
            <div class="JC_img tran3 pointer  relative cBlue width100 height100 marginB10" @click="ZIshow=!ZIshow">
              <Icon
                type="ios-add-circle-outline"
                class="marginB5"
                style="padding-top:40px;"
                size="40"
              />
              <div class="f_12">证件上传</div>
               <img :src="cert_file_path.file_url" v-show="$app.judgeData(cert_file_path.file_url)" class="InputShowImg cover" />
            </div>
            <Button class=" marginB20 " v-show="$app.judgeData(cert_file_path.file_url)" type="primary" ghost size="small" @click="$app.openWindow(cert_file_path.file_url)">查看图片</Button>
          </div>

          <div class="cRed marginB20">提示：可直接上传营业执照/身份证，系统自动录入以下信息</div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">
              著作权人类型：
            </div>

            <div class="overflowH">
              <Select v-model="people_type" style="width:150px" @on-change="ttW" >
                <OptionGroup label="自然人">
                  <Option v-for="(val,i) in zRr" :value="val.type" :key="i">{{val.text}}</Option>
                </OptionGroup>
                <OptionGroup label="法人">
                  <Option v-for="(val,i) in faRen" :value="val.type" :key="i">{{val.text}}</Option>
                </OptionGroup>
                <OptionGroup label="其他">
                  <Option v-for="(val,i) in qT" :value="val.type" :key="i">{{val.text}}</Option>
                </OptionGroup>
              </Select>
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">
              著作权人国籍：
            </div>

            <div class="overflowH">
              <Select v-model="people_country" style="width:150px">
                <Option v-for="(val,i) in zGp" :value="val.type" :key="i">{{val.text}}</Option>
              </Select>
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">
              著作权人省市：
            </div>

            <div class="overflowH">
              <!-- 1省+市+区；2省+市；3公司名认证专用：省+市+区 -->
              <YZ ref="YZ" :addObj="addObj" :type="2" />
            </div>
          </div>

          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">
              自然人/机构名称：
            </div>

            <div class="overflowH">
              <Input
                placeholder="请输入 自然人/机构 名称"
                size="large"
                v-model="people_name"
                ref="people_name"
                clearable
                class="marginR10 SQ_One_R"
              />
            </div>
          </div>

          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">
              证件类型：
            </div>
            <div class="overflowH">
              <Select v-model="cert_type" class="SQ_One_R" size="large">
                <Option v-for="(val,i) in zJRp" :value="val.type" :key="i">{{val.text}}</Option>
              </Select>
            </div>
          </div>
          
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">
              证件号码：
            </div>

            <div class="overflowH">
              <Input
                placeholder="请输入证件号码"
                size="large"
                v-model="cert_number"
                ref="cert_number"
                clearable
                class="marginR10 SQ_One_R "
              />
              <span class="cCCC">申请人为自然人填写身份证号码，企业填写统一信用代码</span>
            </div>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>


<script>
import YZ from "@$@/_service/yZ";
export default {
  name: "c1",
  components: { 
    YZ
  },
  data() {
    let {
      $route:{
        query:{
          type,
          goodsId:goods_id,
          order_id,
        }
      }
    }=this;

    // console.log('页面传值  = ',type,goods_id)


    let data = {
      type,goods_id,//路由取值
      order_id,//只有编辑页面会有

      people_name: "", //自然人/机构名称
      cert_number: "", //证件号
      
      
      people_type:1, //著作人类型
      
      people_country: "CN", //国籍
      cert_type:1, //证件类型

      //证件地址
      cert_file_path:{
        file_url:'',//前端展示路径
        file_path:''//上传给后台的路径
      }
    };
    let tool = {
      sF:false,//右上角框框显示
      goodsObj:'',//订单详情

      //智能识别身份证接口
      ZIshow:false,//弹框隐藏显示

      zRr: [{
        type:1,
        text:'自然人'
      }],

      faRen: [{
        type:21,
        text:'企业法人'
      },{
        type:22,
        text:'机关法人'
      },{
        type:23,
        text:'事业单位法人'
      },{
        type:24,
        text:'社会团体法人'
      }],
      qT: [{
        type:3,
        text:'其他组织'
      },{
        type:4,
        text:'其他'
      }],
      zGp: [{
        type:'CN',
        text:'中国'
      }],
      zJRp: [
        {
          type:1,
          text:'居民身份证'
        },
        {
          type:2,
          text:'军官证'
        },
        {
          type:4,
          text:'护照'
        },
        {
          type:5,
          text:'企业法人营业执照'
        },
        {
          type:6,
          text:'组织机构代码证书'
        },
        {
          type:7,
          text:'事业单位法人证书'
        },
        {
          type:8,
          text:'社团法人证书'
        },
        {
          type:9,
          text:'其他有效证件'
        }
      ]
    };
    let add = {
      addObj: {
        people_province: "", //省份
        people_city: "" //城市
      },
      suoJ:true//右上角浮动框：true显示，false隐藏
    };
    return Object.assign(data, tool, add);
  },
  mounted() {
    
  },
  created() {
    let {
      order_id
    }=this;
    if($app.judgeData(order_id)){//编辑
      //订单详情
      $ajax.orderInfo(order_id,resData=>{
        let {
          goods_name
        }=resData;
        let tips='登记-'
        let tXu=goods_name.indexOf('登记\-');
        let name=$app.superSlice(goods_name,0,tXu+2);
        let desc=$app.superSlice(goods_name,tXu+3);
        this.goodsObj={
          name:name,
          desc:desc,
          official_fee:resData.official_fee,
          price:resData.order_money,
          service_fee:resData.service_fee
        };
        this.sF=true;
      });
      
    }else{
      this.getA();//第一次
    }
    
  },

  methods: {
    //身份证+营业执照识别 'uploadLicense'营业执照，'uploadIdcard'身份证
    filImage_up(e,num){//选择文件

      this.ZIshow = false;//弹框消失
      let file = e.target.files[0];//选中的文件
      
      // 格式判断
      $app.suffix.jpgPng(e,file,false,()=>{
        $app.selectFileImage(null,null,file,num,resData=>{
          if(num.type=='uploadLicense'){//营业执照

            this.cert_type=5;
            this.people_type=21;
            this.ttW();

            
            if($app.judgeData(resData.yyzz)){

              if($app.judgeData(resData.yyzz.company_name)){
                this.people_name=resData.yyzz.company_name;
                this.$parent.$refs['C2'].reg_people_name=resData.yyzz.company_name;

              }else{
                this.people_name='';
                $app.alert('自然人/机构名称识别失败,您可以手动输入信息','温馨提示',()=>{
                  this.$refs['people_name'].focus();
                });
              }

              if($app.judgeData(resData.yyzz.register_num)){
                this.cert_number=resData.yyzz.register_num;
              }else{
                this.cert_number='';
                $app.alert('证件号码识别失败,您可以手动输入信息','温馨提示',()=>{
                  this.$refs['cert_number'].focus();
                });
              }
              
            }else{
              this.people_name='';
              this.cert_number='';
              $app.alert('营业执照识别失败,您可以手动输入信息','温馨提示',()=>{
                this.$refs['people_name'].focus();
              });
            }
          }else if(num.type=='uploadIdcard'){//身份证
            this.cert_type=1;
            this.people_type=1;
            this.ttW();
            
            
            if($app.judgeData(resData.idcard)){

              if($app.judgeData(resData.idcard.name)){
                this.people_name=resData.idcard.name;
                this.$parent.$refs['C2'].reg_people_name=resData.idcard.name;
              }else{
                this.people_name='';
                $app.alert('自然人/机构名称识别失败,您可以手动输入信息','温馨提示',()=>{
                  this.$refs['people_name'].focus();
                });
              }

              if($app.judgeData(resData.idcard.id)){
                this.cert_number=resData.idcard.id;
              }else{
                this.cert_number='';
                $app.alert('证件号码识别失败,您可以手动输入信息','温馨提示',()=>{
                  this.$refs['cert_number'].focus();
                });
              }
              
              
            }else{
              this.people_name='';
              this.cert_number='';
              $app.alert('身份证识别失败,您可以手动输入信息','温馨提示',()=>{
                this.$refs['people_name'].focus();
              });
            }
          }

          this.$refs[num.type].value='';//清空input file的值
        },()=>{
          this.$refs[num.type].value='';//清空input file的值
          this.$refs['people_name'].focus();
        });
      });
      
    },

    getA(){
      let {
        type,goods_id
      }=this;


      //商品详情请求
      $ajax.gList(type,resData=>{
        // console.log('超能',resData)
        this.$nextTick(()=>{
          this.sF=true;
          if(resData.length>1){
            resData.forEach((val,i)=>{
              (val.id==goods_id)&&(this.goodsObj=val);
            });
          }else{
            this.goodsObj=resData[0];
          }
        });
      });
    },
    

    //联动赋值
    ttW(){
      let {
        $route:{
          name
        },
        people_type
      }=this;


      //版权：美术DoMS、软件DoRJ 通过这个来判断
      if(name.indexOf('DoMS')>-1){
        if(people_type==1){
          this.$parent.right_gs_desc=1;
        }else if(people_type==21||people_type==22||people_type==23||people_type==24){
          this.$parent.right_gs_desc=3;
        }
      }
    },

  }
};
</script>

